import React from 'react'
import { Steps } from 'antd'
import _ from 'lodash'
const { Step } = Steps

const CommonSteps = ({ options, current, component, setCurrent }) => {
  const Component = component[current]
  return (
    <div>
      <Steps size="small" current={current} type="navigation">
        {_.map(options, (item, key) => {
          return (
            <Step
              key={item.id}
              subTitle={item.subTitle}
              title={item.title}
              description={item.description}
            />
          )
        })}
      </Steps>
      <div className="commonSteps-component">
        {Component && <Component setCurrent={setCurrent} />}
      </div>
    </div>
  )
}

export default CommonSteps
